<template>
  <div class="confirm">
    <div class="desc">
      请用本人支付宝扫一扫扫描如下二维码
    </div>
    <div class="qrcode" v-if="payPath">
      <image :src="payPath" mode="widthFix" class="qrimg"/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import mcht from '@/api/mcht'
import { useHomeStore } from '@/store'

const { 
  mchtNo
} = storeToRefs(useHomeStore())

const payPath = ref('')
const loading = ref<boolean>(false)
onMounted(async () => {
  loading.value = true
  const { data } = await mcht.alAuthQuery(mchtNo.value)
  loading.value = false
  if (data.status === 'success') {
    payPath.value = data.data.alPayPath
  }
})
</script>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationBarTitleText": "支付宝意愿确认",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.confirm
  text-align: center
  padding-top: 30px
  .desc
    margin-bottom: 20px
.qrcode
  width: 100%
  display: flex
  justify-content: center
  .qrimg
    width: 500rpx
</style>